<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" class="input" />
    <button class="btn">计算</button>
    <!-- <script>
      /*
        斐波那契数列（兔子数列）：1 1 2 3 5 8 13 21 34 55 89
      */

      const inputEl = document.querySelector(".input");
      const btnEl = document.querySelector(".btn");

      function calc(num) {
        return num < 3 ? 1 : calc(num - 1) + calc(num - 2);
      }

      btnEl.onclick = function () {
        const num = +inputEl.value;
        const result = calc(num);
        console.log(result);
      };
    </script> -->

    <script>
      /*
        斐波那契数列（兔子数列）：1 1 2 3 5 8 13 21 34 55 89
      */

      const inputEl = document.querySelector(".input");
      const btnEl = document.querySelector(".btn");

      /*
        发送消息 postMessage
        接受消息 onmessage / addEventListener('message', function () {})
      */

      // 1. 创建分线程: 执行js文件的所有内容
      const worker = new Worker("./02.calcWorker.js");

      btnEl.onclick = function () {
        const num = +inputEl.value;
        // 2. 给分线程发送消息，通知分线程干活
        worker.postMessage(num);
        // 3. 主线程接受分线程发送的消息
        worker.onmessage = function (e) {
          console.log("分线程计算结果：", e.data);
        };
      };
    </script>
  </body>
</html>
